<template>
	<div class="main expander">
		<section class="award expander">
			<img class="bkg_award_title_01" src="//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/bkg_award_title_01.png" alt="bkg_award_title_01">
			<p>
				<img v-show="querySuccess" class="icon_gift" src="//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/icon_gift.png" alt="gift">
				<span v-if="querySuccess && isLogin && isLoan">您有<strong>{{ prizeCount }}</strong>次抽奖机会</span>
				<span v-if="querySuccess && (!isLogin || !isLoan)">感恩有你 双11有礼</span>
			</p>
			<div>
				<img class="bkg_award_01" src="//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/bkg_award_01.png" alt="bkg_award_01">
				<img class="bkg_award_02" src="//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/bkg_award_02.png" alt="bkg_award_02">
				<span v-show="!querySuccess">
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
					<i></i>
				</span>
				<ul v-show="querySuccess" class="expander">
					<li v-for="prize in prizeList" :class="{ 'highlight': currOrder === prize.orderby, 'expander': true }">
						<img v-if="prize.prizeName.toLowerCase() === 'iphonex'" src="//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/award_iphone.png" alt="iphone">
						<p :class="{ 'has_img': prize.prizeName.toLowerCase() === 'iphonex' }">{{ prize.prizeName }}</p>
					</li>
				</ul>
				<a v-show="querySuccess" @click="getLottery" id="btn-draw" :class="{ 'btn-draw': true, 'gray': buttonDisable }">
					<img src="//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/btn_draw.png" alt="btn_draw">
				</a>
				<a @click="toAwardList" id="btn-list" class="btn-list">
					<img src="//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/btn_list.png" alt="btn_list">
				</a>
			</div>
		</section>
		<section class="list">
			<img class="bkg_title" src="//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/bkg_title.png" alt="bkg_title">
			<h2>中奖名单</h2>
			<div class="marquee">
				<ul class="slider" :style="{ 'marginTop': ulOffsetTop + 'px' }">
					<li v-for="(record, index) in recordList" :class="{ 'odd': !!(index % 2) }">恭喜{{ record.mobile }} 抽中{{ record.prizeName }}</li>
				</ul>
				<ul class="slider">
					<li v-for="(record, index) in recordList" :class="{ 'odd': !!((recordList.length + index) % 2) }">恭喜{{ record.mobile }} 抽中{{ record.prizeName }}</li>
				</ul>
			</div>
		</section>
		<section class="rule">
			<img class="bkg_title" src="//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/bkg_title.png" alt="bkg_title">
			<h2>活动规则</h2>
			<div>
				<p><span class="strong">活动时间：</span><span class="strong">2017年11月8日-2017年11月17日</span></p>
				<p><span class="strong">活动规则：</span><span>活动期间，用户在还卡超人发起借款，即可获得3次抽奖机会(每人最多可获得3次)。</span></p>
				<p><span class="strong">活动奖品：</span><span>iPhone X、30元、50元、100元现金券、格瓦拉电影券、1G手机流量。</span></p>
				<p><span class="strong">奖品发放与使用规则：</span></p>
				<ul>
					<li>(1) 所有奖品将在用户的借款到账后发放；</li>
					<li>(2) 现金券发放到账户-现金券/红包，有效期60天。用户在下一次成功借款后可提现；</li>
					<li>(3) 电影券为电子兑换码形式，在11月24日24点前以短信形式发放；</li>
					<li>(4) 手机流量将在11月24日24点前直接充值到获奖用户的注册手机。</li>
					<li>(5) iPhone X 将在客服确认收货地址后发放。</li>
				</ul>
			</div>
		</section>
		<section class="result">
			<div class="succeed" v-show="resultType === 'succeed'">
				<div>
					<img src="//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/icon_succeed.png" alt="icon_succeed">
					<p><span>恭喜您！</span></p>
					<p>抽中<span>{{ lotteryInfo.prizeName }}</span></p>
					<p>奖品将于本次借款成功后发放</p>
					<a @click="hideResult">我知道了</a>
				</div>
			</div>
			<div class="fail" v-show="resultType === 'fail'">
				<div>
					<img src="//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/icon_fail.png" alt="icon_fail">
					<p v-show="!!resultMessage">{{ resultMessage }}</p>
					<p v-show="!resultMessage">擦擦屏幕，再来一次</p>
					<a @click="hideResult">我知道了</a>
				</div>
			</div>
			<div class="nochance" v-show="resultType === 'nochance'">
				<div>
					<img src="//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/icon_nochance.png" alt="icon_nochance">
					<p>您的抽奖机会已用完</p>
					<p>下次活动继续哟～</p>
					<a @click="hideResult">我知道了</a>
				</div>
			</div>
		</section>
		<section v-show="toastShow" class="toast">
			<div>
				<p>{{ toastMessage }}</p>
			</div>
		</section>
		<section v-show="alertShow" class="alert">
			<div>
				<p>{{ alertMessage }}</p>
				<div>
					<a @click="hideAlert">取消</a>
					<a @click="goLoan">确定</a>
				</div>
			</div>
		</section>
		<section class="bkg">
			<div v-for="bkg in dynData.bkg">
				<img :src="bkg" alt="bkg">
			</div>
		</section>
		<section class="img_preload">
			<img src="//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/award_highlight.png" alt="award_highlight">
		</section>
		<footer>
			<p>本次活动与Apple.Inc无关</p>
		</footer>
	</div>
</template>

<script>
	export default {
		'name': 'view-other_static-double_eleven',
		'metaInfo': {
			'title': '上市送红包'
		},
		data() {
			return {
				'token': this.$getCookie('huankachaoren'),
				'title': document.title,
				'locationHref': location.href,
				'querySuccess': false,
				'isActivityStart': false,
				'isLogin': false,
				'isLoan': false,
				'prizeCount': 0,
				'prizeList': [],
				'failPrizeId': 5,
				'recordList': [],
				'lotteryInfo': {},
				'ulOffsetTop': 0,
				'ulHeight': 0,
				'marqueeStep': 0.3,
				'currIdx': 0,
				'currOrder': 0,
				'rollStep': 150,
				'rollStepIncrease': 1.22,
				'stop': false,
				'inStop': false,
				'rollTimeout': null,
				'lotterying': false,
				'lotteryDelay': 1000,
				'resultDelay': 400,
				'resultType': '',
				'resultMessage': '',
				'toastShow': false,
				'toastMessage': '',
				'alertShow': false,
				'alertMessage': '',
				'buttonDisable': false,
				'dynData': {
					'shareData': null,
					'bkg': []
				},
				'goLoanClicked': false,
				'showToastDelay': 1000
			};
		},
		'watch': {
			recordList() {
				this.$nextTick(() => {
					let slider = document.querySelectorAll('.slider')[0];
					this.ulOffsetTop = slider.offsetTop;
					this.ulHeight = slider.offsetHeight;
					this.marquee();
				});
			},
			lotteryInfo() {
				setTimeout(() => {
					this.stopRoll();
				}, this.lotteryDelay);
			},
			currOrder(newOrder) {
				this.currIdx = newOrder ? this.prizeList.find(item => item.orderby === newOrder).prizeId : 0;
			}
		},
		'methods': {
			getDynamicData() {
				let millisecondsPerSecond = 1000,
					secondsPerMinute = 60,
					minutesPerVersion = 5;
				let dynamicScriptDelay = 500;
				let $dynamicScript = document.createElement('script');
				$dynamicScript.type = 'text/javascript';
				$dynamicScript.async = true;
				$dynamicScript.src = `${document.location.protocol}//hh.ppdaicdn.com/static/scripts/other_static/double_eleven.js
					?v=${parseInt(new Date().getTime() / millisecondsPerSecond / secondsPerMinute / minutesPerVersion, 10)}`;
				document.body.appendChild($dynamicScript);
				this.dynData = window.dynData || this.dynData;
				if (!this.dynData.shareData || !this.dynData.bkg.length) {
					setTimeout(() => {
						this.getDynamicData();
					}, dynamicScriptDelay);
					return;
				}
				this.showShare();
			},
			showShare() {
				try {
					/*AppBridge.shareData(JSON.stringify({
						'logoUrl': this.shareLogo,
						'title': this.title,
						'subTitle': this.shareSubtitle,
						'shareUrl': this.locationHref + '&shared=1',
						'redbag': 0
					}));*/
					window.AppBridge.shareData(JSON.stringify(this.dynData.shareData));
				} catch(ex) {
					console.log('需要在APP中使用');
				}
			},
			goLogin(errorCallback) {
				try {
					window.AppBridge.goLogin(this.locationHref, this.title);
				} catch(ex) {
					console.log('需要在APP中使用');
					errorCallback && errorCallback(ex);
				}
			},
			getData() {
				this.$post('/api/activity/singelDayActivity.htm', {}).then(data => {
					if (data.result !== 0) {
						this.resultMessage = data.resultMessage || '擦擦屏幕，再来一次';
					}
					if (!data.content) {
						this.showToast('访问失败，请稍后再试');
						return;
					}
					Object.entries(data.content).forEach(([key, val]) => {
						this[key] = val;
					});
					if (this.isLogin && this.isLoan && !this.prizeCount) {
						this.setButtonDisable();
					}
					this.querySuccess = true;
				}, () => {
					this.showToast('请求失败，请稍后再试');
				});
			},
			getLottery() {
				this.sensorTrack({
					'tgt_type': 'icon',
					'tgt_name': 'hh-双11活动页-立即抽奖',
					'tgt_event_id': 'hh_double11_prizeDraw',
					'target_url': '',
					'url': this.locationHref
				});
				if (!this.isLogin) {
					this.goLogin(() => {
						if (this.$getURLSearchParam('shared')) {
							this.goDownload();
						}
					});
					return;
				}
				if (this.buttonDisable || this.lotterying) {
					return;
				}
				if (this.isActivityStart && !this.isLoan) {
					this.showAlert('您需要先发布借款才能抽奖哦～');
					return;
				}
				if (this.isActivityStart && !this.prizeCount) {
					this.showResult();
					return;
				}
				this.lotterying = true;
				this.roll();
				this.$post('/api/activity/lottery.htm', {}).then(data => {
					if (data.result !== 0) {
						this.resultMessage = data.resultMessage || '擦擦屏幕，再来一次';
						this.resultType = 'fail';
						clearTimeout(this.rollTimeout);
						return;
					}
					this.lotteryInfo = data.content;
					this.lotteryInfo.prizeName = this.prizeList.find(item => item.prizeId === this.lotteryInfo.prizeId).prizeName;
					this.sensorTrack({
						'tgt_type': 'icon',
						'tgt_name': `hh-双11活动页-抽奖结果-${this.lotteryInfo.prizeName}`,
						'tgt_event_id': 'hh_double11_prizeDrawResult',
						'target_url': '',
						'url': this.locationHref
					});
				}, () => {
					this.showToast('请求失败，请稍后再试');
				});
			},
			toAwardList() {
				this.sensorTrack({
					'tgt_type': 'icon',
					'tgt_name': 'hh-双11活动页-我的奖品',
					'tgt_event_id': 'hh_double11_my',
					'target_url': '',
					'url': this.locationHref
				});
				if (this.$getURLSearchParam('shared')) {
					this.goDownload();
					return;
				}
				if (!this.isLogin) {
					this.goLogin();
					return;
				}
				try {
					window.AppBridge.navigateH5Url('https://m.huankachaoren.com/double_eleven_award', document.title);
				} catch(ex) {
					this.$router.push({
						'name': 'double_eleven_award'
					});
				}
			},
			marquee() {
				this.ulOffsetTop -= this.marqueeStep;
				if (this.ulOffsetTop + this.ulHeight < 0) {
					this.ulOffsetTop += this.ulHeight;
				}
				requestAnimationFrame(() => {
					this.marquee();
				});
			},
			roll() {
				this.currOrder = this.currOrder === this.prizeList.length ? 1 : this.currOrder + 1;
				this.rollTimeout = setTimeout(() => {
					if (this.currIdx === this.lotteryInfo.prizeId && this.inStop) {
						clearTimeout(this.rollTimeout);
						this.showResult();
						return;
					}
					if (this.currIdx === this.lotteryInfo.prizeId && this.stop) {
						this.rollStep *= this.rollStepIncrease;
						this.inStop = true;
					}
					if (this.inStop) {
						this.rollStep *= this.rollStepIncrease;
					}
					this.roll();
				}, this.rollStep);
			},
			stopRoll() {
				this.stop = true;
			},
			showResult() {
				setTimeout(() => {
					this.resultType = this.prizeCount ? this.lotteryInfo.prizeId === this.failPrizeId ? 'fail' : 'succeed' : 'nochance';
				}, this.resultDelay);
			},
			hideResult() {
				this.reset();
			},
			showToast(msg) {
				this.toastShow = true;
				this.toastMessage = msg;
				setTimeout(() => {
					this.hideToast();
				}, this.showToastDelay);
			},
			hideToast() {
				this.toastShow = false;
			},
			showAlert(msg) {
				this.alertShow = true;
				this.alertMessage = msg;
			},
			hideAlert() {
				this.sensorTrack({
					'tgt_type': 'icon',
					'tgt_name': 'hh-双11活动页-弹窗-取消',
					'tgt_event_id': 'hh_double11_popupCancel',
					'target_url': '',
					'url': this.locationHref
				});
				this.alertShow = false;
			},
			goLoan() {
				this.sensorTrack({
					'tgt_type': 'icon',
					'tgt_name': 'hh-双11活动页-弹窗-继续',
					'tgt_event_id': 'hh_double11_popupContinue',
					'target_url': '',
					'url': this.locationHref
				});
				if (this.goLoanClicked) {
					return;
				}
				this.goLoanClicked = true;
				this.alertShow = false;
				try {
					window.AppBridge.goLoan();
				} catch(ex) {
					this.goDownload();
				}
				this.goLoanClicked = false;
			},
			goDownload() {
				location.assign('//a.app.qq.com/o/simple.jsp?pkgname=com.ppdai.huanapp');
			},
			setButtonDisable() {
				this.buttonDisable = true;
			},
			reset(isPrizeCountDecrease) {
				this.prizeCount = this.lotteryInfo.prizeCount != null ? this.lotteryInfo.prizeCount : this.prizeCount;
				if (this.isLogin && this.isLoan && !this.prizeCount) {
					this.setButtonDisable();
				}
				if (isPrizeCountDecrease) {
					this.prizeCount -= isPrizeCountDecrease;
				}
				this.currIdx = 0;
				this.currOrder = 0;
				this.rollStep = 150;
				this.stop = false;
				this.inStop = false;
				this.lotterying = false;
				this.resultType = '';
				this.resultMessage = '';
			},
			sensorTrack(sensorObj) {
				try {
					window.sa.track('h5_clk', sensorObj);
				} catch(ex) {
					console.log('神策统计功能失败');
				}
			}
		},
		created() {
			this.getDynamicData();
			this.getData();
		}
	};
</script>

<style scoped type="text/scss">
	@keyframes loading {
		0% {
			box-shadow: 0 0 0 0.1em #ffffff;
		}
		50% {
			box-shadow: 0 0 0 0.3em #ffffff;
		}
		100% {
			box-shadow: 0 0 0 0.1em #ffffff;
		}
	}
	ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	.expander {
		&::after {
			content: "";
			display: block;
			position: relative;
			z-index: -1;
		}
	}
	.main {
		position: relative;
		overflow: hidden;
		background-color: #4c3d7a;
		&::after {
			padding-top: 1.23456%;
		}
	}
	.bkg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		img {
			display: block;
			width: 100%;
		}
	}
	.award,
	.list,
	.rule {
		position: relative;
		z-index: 1;
	}
	.award {
		width: 78.8%;
		margin: 58.6667% 10.6% 0;
		&::after {
			padding-top: 20.3%;
		}
		.bkg_award_title_01 {
			display: block;
			width: 100%;
		}
		.bkg_award_01,
		.bkg_award_02 {
			display: block;
			position: relative;
			width: 100%;
		}
		.bkg_award_01 {
			z-index: 1;
		}
		.bkg_award_02 {
			z-index: 0;
			margin-top: -1px;
		}
		> p {
			height: 0.9em;
			margin: 0;
			text-align: center;
			font-size: 15px;
			background: url(//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/bkg_award_title_02.png) center repeat;
			background-size: 100%;
			.icon_gift,
			span {
				display: inline-block;
				vertical-align: top;
				transform: translateY(-0.75em);
			}
			.icon_gift {
				height: 20px;
				margin-right: 0.2em;
			}
			span {
				font-weight: bold;
				line-height: 22px;
			}
			strong {
				padding: 0.2em;
				color: #fe4425;
				font-size: 1.3em;
			}
		}
		> div {
			position: relative;
			span {
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 2;
				width: 0;
				height: 0;
				margin-top: -4.0678%;
				i {
					position: absolute;
					width: 2px;
					height: 2px;
					margin: -1;
					border-radius: 50%;
					background-color: #ffffff;
					&:nth-child(1) {
						top: -0.9em;
						left: -0.9em;
						animation: loading 0.72s -0.06s infinite;
					}
					&:nth-child(2) {
						top: -0.9em;
						left: 0;
						animation: loading 1.02s 0.25s infinite;
					}
					&:nth-child(3) {
						top: -0.9em;
						left: 0.9em;
						animation: loading 1.28s -0.17s infinite;
					}
					&:nth-child(4) {
						top: 0;
						left: -0.9em;
						animation: loading 1.42s 0.48s infinite;
					}
					&:nth-child(5) {
						top: 0;
						left: 0;
						animation: loading 1.45s 0.31s infinite;
					}
					&:nth-child(6) {
						top: 0;
						left: 0.9em;
						animation: loading 1.18s 0.03s infinite;
					}
					&:nth-child(7) {
						top: 0.9em;
						left: -0.9em;
						animation: loading 0.87s 0.46s infinite;
					}
					&:nth-child(8) {
						top: 0.9em;
						left: 0;
						animation: loading 1.45s 0.78s infinite;
					}
					&:nth-child(9) {
						top: 0.9em;
						left: 0.9em;
						animation: loading 1.06s 0.45s infinite;
					}
				}
			}
			ul {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				width: 76%;
				margin: 12%;
				border: 0.2em solid #000000;
				border-radius: 0.7em;
				text-align: center;
				font-size: 14px;
				background-color: #000000;
				&::after {
					padding-top: 97%;
				}
			}
			li {
				/*display: flex;
				flex-flow: column nowrap;
				justify-content: center;*/
				position: absolute;
				overflow: hidden;
				width: 32.13%;
				margin: 0.6%;
				background: url(//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/award_common.png) center no-repeat;
				background-size: contain;
				&.highlight {
					background-image: url(//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/award_highlight.png);
				}
				&:nth-of-type(1) {
					top: 0;
					left: 0;
				}
				&:nth-of-type(2) {
					top: 0;
					left: 33.33%;
				}
				&:nth-of-type(3) {
					top: 0;
					left: 66.67%;
				}
				&:nth-of-type(4) {
					top: 33.33%;
					left: 66.67%;
				}
				&:nth-of-type(5) {
					top: 66.67%;
					left: 66.67%;
				}
				&:nth-of-type(6) {
					top: 66.67%;
					left: 33.33%;
				}
				&:nth-of-type(7) {
					top: 66.67%;
					left: 0;
				}
				&:nth-of-type(8) {
					top: 33.33%;
					left: 0;
				}
				&::after {
					padding-top: 95.0355%;
				}
				img,
				p {
					position: absolute;
				}
				img {
					top: 0.7em;
					left: 50%;
					width: 1.2em;
					margin-left: -0.6em;
				}
				p {
					transform: translateY(-50%);
					top: 50%;
					left: 0;
					width: 80%;
					margin: 0 10%;
					color: #fef973;
					line-height: 1.4;
					&.has_img {
						margin-top: 1.2em;
					}
				}
			}
			.btn-draw,
			.btn-list {
				position: absolute;
				z-index: 2;
				img {
					display: block;
					width: 100%;
				}
			}
			.btn-draw {
				top: 0;
				left: 37.98445%;
				width: 25.6311%;
				margin-top: 37.2%;
				&.gray {
					filter: grayscale(100%);
				}
			}
			.btn-list {
				top: 0;
				left: 34.7716%;
				width: 30.4568%;
				margin-top: 105%;
				border-radius: 1.2em;
				box-shadow: 0 0 1em 0 rgba(0,0,0,0.4);
			}
		}
	}
	.list,
	.rule {
		width: 77.6%;
		margin: 0 11.2%;
		.bkg_title {
			display: block;
			width: 100%;
		}
		h2 {
			height: 37px;
			margin: -37px 0 0;
			color: #ffea5f;
			text-align: center;
			font-size: 17px;
			line-height: 37px;
		}
	}
	.list {
		margin-bottom: 3.2%;
		.marquee {
			overflow: hidden;
			position: relative;
			height: 12.5em;
			border-radius: 0 0 0.5em 0.5em;
			box-shadow: 0 0 50px rgba(0,0,0,0.4);
			font-size: 14px;
			background-color: #5143a2;
			&::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				padding-bottom: 2.5em;
				background-color: #5143a2;
			}
		}
		ul {
			color: #17172e;
			text-align: center;
			li {
				height: 2.5em;
				line-height: 2.5;
				background-color: #f3d9d8;
				&.odd {
					background-color: #c4b2d0;
				}
			}
		}
	}
	.rule {
		margin-bottom: 5%;
		> div {
			padding: 0 6.0137%;
			border-radius: 0 0 0.5em 0.5em;
			box-shadow: 0 0 50px rgba(0,0,0,0.4);
			color: #15143b;
			font-size: 14px;
			line-height: 1.6;
			background-color: #ebd7df;
			p {
				margin: 0;
				padding: 0.6em 0;
				&:first-child {
					padding-top: 1.5em;
				}
				&:last-of-type {
					padding-bottom: 0;
				}
			}
			.strong {
				font-weight: bold;
			}
			ul {
				padding-bottom: 2em;
			}
		}
	}
	.result {
		> div {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.3);
			> div {
				position: fixed;
				top: 50%;
				left: 50%;
				z-index: 11;
				width: 16em;
				min-height: 16em;
				margin: -8em;
				border-radius: 0.6em;
				background-color: #ffffff;
				img {
					display: block;
					width: 7.73em;
					margin: 1.33em 4.135em;
					border-radius: 50%;
					box-shadow: 0 0 2em 0 rgba(0,0,0,0.15);
				}
				p {
					text-align: center;
					font-size: 15px;
					span {
						color: #ff6857;
						font-size: 18px;
					}
				}
				a {
					display: block;
					width: 8em;
					height: 2.5333em;
					margin: 1.73em auto 1em;
					border-radius: 1.26665em;
					text-align: center;
					font-size: 15px;
					line-height: 2.5333em;
					background-color: #ffcd35;
				}
			}
		}
		.succeed {
			> div {
				min-height: 19.83em;
				margin: -9.92em -8em;
				p {
					margin: 0.5em 8%;
				}
			}
		}
		.fail {
			> div {
				min-height: 16.9em;
				margin: -8.45em -8em;
				p {
					margin: 0.67em 8%;
				}
			}
		}
		.nochance {
			> div {
				min-height: 18.23em;
				margin: -9.12em -8em;
				p {
					margin: 0.5em 8%;
				}
			}
		}
	}
	.toast,
	.alert {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		> div {
			position: relative;
			top: 50%;
			left: 0;
			text-align: center;
		}
	}
	.toast {
		> div {
			p {
				display: inline-block;
				margin-top: -1.5em;
				padding: 0 1em;
				border-radius: 0.5em;
				color: #ffffff;
				line-height: 3em;
				background-color: rgba(0,0,0,0.8);
			}
		}
	}
	.alert {
		> div {
			margin-top: -4em;
			font-size: 15px;
			p {
				width: 70%;
				height: 5em;
				margin: 0 auto;
				border: 1px solid #d8d8d8;
				color: #8d8d8d;
				line-height: 5em;
				background-color: #ffffff;
			}
			> div {
				overflow: hidden;
				width: 70%;
				margin: -1px auto 0;
				border: 1px solid #d8d8d8;
				background-color: #ffffff;
				a {
					float: left;
					width: 50%;
					height: 3em;
					color: #8d8d8d;
					line-height: 3em;
					&:first-child::after {
						content: "";
						float: right;
						width: 1px;
						height: 100%;
						background-color: #d8d8d8;
					}
					&:last-child {
						color: #508cee;
					}
				}
			}
		}
	}
	.img_preload {
		display: none;
		position: absolute;
		top: 100%;
		left: 100%;
		z-index: -10;
	}
	footer {
		position: relative;
		margin-bottom: 2.5%;
		p {
			margin: 0;
			color: #c5b6ef;
			text-align: center;
			font-size: 13px;
		}
	}
</style>
